<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Pesquisar Fichas
        </ui:define>

        <ui:define name="breadcrumb">
            <div class="breadcrumb_divider"></div>
            <a href="pesquisarCliente.xhtml">Cliente</a>
            <div class="breadcrumb_divider"></div>
            <a class="current">Pesquisar</a>
        </ui:define>

        <ui:define name="sidebar">
            <h3>Cliente</h3>
            <ul class="toggle">
                <li class="icn_new_article"><a href="criarCliente.xhtml">Cadastrar</a></li>
                <li class="icn_search"><a href="pesquisarCliente.xhtml">Pesquisar</a></li>
            </ul>
        </ui:define>

        <ui:define name="content">           
            <h:form id="pesquisarClienteForm">

                <p:messages id="pesquisarPessoaMessages" autoUpdate="true" />

                <f:validateBean disabled="true">

                    <fieldset>
                        <legend> <h4 style="margin:0 0 10px 0">Filtros</h4></legend>
                        <p:panel id="dadosPessoaPanel" styleClass="column12"  style="background: none; border: none;">

                            <div class="row">
                                <div class="column1">
                                    <p:outputLabel value="Tipo" for="nomeInputText"
                                                   rendered="#{ managerCriarPessoa.pessoa.id == null }" />
                                </div>
                                <div class="column10">                                
                                    <p:selectOneRadio id="tipoPessoaSelectOneMenu" value="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa }" >
                                        <f:selectItems value="#{ enums.tiposPessoa() }" />
                                        <p:ajax event="change" update="dadosPessoaPanel, :pesquisarClienteForm:tiposSeloDataTable"
                                                listener="#{ managerPesquisarPessoa.limpar(managerPesquisarPessoa.pessoaPesquisar.tipoPessoa) }"/>
                                    </p:selectOneRadio>
                                </div>
                            </div>

                            <div class="row">                            
                                <div class="column1">
                                    <p:outputLabel value="Nome" for="nomeInputText"
                                                   rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                                </div>
                                <div class="column5">
                                    <p:inputText id="nomeInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.nome }"
                                                 rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                                </div>

                                <div class="column1">
                                    <p:outputLabel value="CPF" for="cpfInputMask"
                                                   rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" />                                
                                </div>
                                <div class="column4">
                                    <p:inputMask id="cpfInputMask" value="#{ managerPesquisarPessoa.pessoaPesquisar.cpf }"
                                                 rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA'}" mask="999.999.999-99" />
                                </div>
                            </div>                            

                            <div class="row">
                                <div class="column2">
                                    <p:outputLabel value="Razão Social" for="razaoSocialInputText"
                                                   rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                </div>
                                <div class="column5">
                                    <p:inputText id="razaoSocialInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.razaoSocial }"
                                                 rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                </div>
                                <div class="column1">
                                    <p:outputLabel value="CNPJ" for="cnpjInputText"
                                                   rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                </div>
                                <div class="column4">
                                    <p:inputMask id="cnpjInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.cnpj }"
                                                 mask="99.999.999/9999-99" rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                </div>
                            </div>

                            <div class="row">
                                <div class="column2">
                                    <p:outputLabel value="Nome Fantasia" for="nomeFantasiaInputText"
                                                   rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                </div>
                                <div class="column5">
                                    <p:inputText id="nomeFantasiaInputText" value="#{ managerPesquisarPessoa.pessoaPesquisar.nome }"
                                                 rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA'}" />                                
                                </div>
                            </div>
                        </p:panel>
                    </fieldset>
                </f:validateBean>

                <div class="buttonAction">
                    <p:commandButton
                        id="pesquisarcommandButton" value="Pesquisar" icon="ui-icon-search"
                        styleClass="ui-priority-primary"
                        update="@form" actionListener="#{ managerPesquisarPessoa.pesquisarCliente() }" />
                    <p:commandButton value="Limpar" icon="ui-icon-close" update="@form"
                                     actionListener="#{ managerPesquisarPessoa.limpar(managerPesquisarPessoa.pessoaPesquisar.tipoPessoa) }" />
                </div>

                <p:dataTable id="tiposSeloDataTable" var="cliente" value="#{ managerPesquisarPessoa.pessoas }"
                             rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado">
                    <p:column width="5%" headerText="Opções">
                            <p:button styleClass="ui-button-only"
                                title="Reconhecimento" href="reconhecimento.xhtml?depositante=#{ cliente.id }"
                                icon="ui-icon-search"/>
                    </p:column>

                    <p:column headerText="Razão Social" rendered="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'JURIDICA' }"
                              width="50%">
                        <h:outputText value="#{ cliente.razaoSocial }" />
                    </p:column>
                    <p:column headerText="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? 'Nome' : 'Nome Fantasia'}"
                              width="50%">
                        <h:outputText value="#{ cliente.nome }" />
                    </p:column>
                    <p:column headerText="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? 'CPF' : 'CNPJ'}"
                              width="40%">
                        <h:outputText value="#{ managerPesquisarPessoa.pessoaPesquisar.tipoPessoa eq 'FISICA' ? managerPesquisarPessoa.adicionarMascaraCPF(cliente.cpf) : managerPesquisarPessoa.adicionarMascaraCNPJ(cliente.cnpj)  }" />
                    </p:column>
                </p:dataTable>

            </h:form>
        </ui:define>
    </ui:composition>

</html>